<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>设置样式</title>
        <style>
            .buttons, 
            .wrapper { border: 1px solid blue; margin: 15px auto; }
            .buttons> button { margin: 10px; }
            .target { min-height: 30px; margin: 10px; }
            .finoa { width: 80%; height: 200px; text-align: center; background: purple; }
            .afang { background: #f4f4f4; }
        </style>
    </head>
    <body>
        <h1>设置元素样式</h1>

        <div class="buttons">
            <button type="button" class="change-property">修改CSS属性值</button>
            <button type="button" class="add-class-name">添加class-name</button>
            <button type="button" class="remove-class-name">删除class-name</button>
            <button type="button" class="toggle-class-name">切换有无</button>
        </div>

        <div class="wrapper">
            <div class="target afang" style="height: 50px;"></div>
        </div>

        <script>
            const cp = document.querySelector('.change-property');
            cp.addEventListener('click',()=>{
                const t = document.querySelector('.target');
                // border: 1px solid red
                t.style.border = '1px solid red';
                // background-color: #ffff00
                t.style.backgroundColor = '#ffff00';
                // font-size: 2rem
                t.style.fontSize = '2rem';
                // 为 t 指向的 HTML 元素设置内容
                t.innerHTML = new Date().toISOString();
            }, false);

            const acn = document.querySelector('.add-class-name');
            acn.addEventListener('click',()=>{
                const t = document.querySelector('.target');
                // 通过 classList 可以获得 t 对应的元素上所有的 class-name 组成的 DOMToken 列表
                let list = t.classList;
                console.log(list);
                // 判断 t 对应的 class 属性中是否 不包含 `finoa`
                if( !list.contains('finoa') ) { // DOMTokenList.prototype.contains
                    list.add('finoa'); // DOMTokenList.prototype.add
                }
                t.innerHTML = new Date().toISOString();
            }, false);

            const rcn = document.querySelector('.remove-class-name');
            rcn.addEventListener('click',()=>{
                const t = document.querySelector('.target');
                // 通过 classList 可以获得 t 对应的元素上所有的 class-name 组成的 DOMToken 列表
                let list = t.classList;
                // 判断 t 对应的 class 属性中是否 包含 `afang`
                if( list.contains('afang') ) { // DOMTokenList.prototype.contains
                    list.remove('afang'); // DOMTokenList.prototype.remove
                }
                t.innerHTML = new Date().toISOString();
            }, false);

            const tcn = document.querySelector('.toggle-class-name');
            tcn.addEventListener('click',()=>{
                const t = document.querySelector('.target');
                // 通过 classList 可以获得 t 对应的元素上所有的 class-name 组成的 DOMToken 列表
                let list = t.classList;
                console.log( list.toggle('finoa') );
                t.innerHTML = new Date().toISOString();
            }, false);

        </script>
    </body>
</html>

